前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 前言

上一章是 Docker 的一些基础用法, 并且我们已经通过 Docker 构建了一个专门用于打包的 Docker 镜像,那么本章,本将借助 Jenkins 的 pipeline 流水线,构建一套适配多端的 job。

# 技术方案设计

照例,在正式开发之前进行了一轮技术预研,先将预研的方案理一下

# 脚本全量流程 + when 条件

一个 pineline 流水线将所有的状态流程都是预设好的,例如全量的流程从 dev -> test -> deploy 这种,可以通过参数 + when 条件语句跳过指定流程

优势:

这个方案是最简单的,同时开发成本最低。

劣势:

虽然是简单的方案,但是脚本相对于固定,如果有全新的流程是需要重新开发新的 pipeline 流水线。

# pipeline scm

通过 pipeline scm 在拉取 git 项目的同时读取 git 项目中的配置文件(Jenkinsfile),进行项目构建。

优势:

相比第一种比较灵活,在项目构建之前通过 gitlab api 的方式去修改 Jenkinsfile,达到一个动态生成流水线的目的。

劣势:

需要通过 gitlab api 去修改 Jenkinsfile,容易引起冲突。

# 修改 Jenkinsfile

创建 10 个 job,关闭单 job 的并发功能,直接通过 Jenkins Api 修改对应的 Jenkinsfile,然后手动维护任务队列。

优势:

自定义化程度非常高,且与项目代码完全隔离,不需要修改项目中的配置文件。

劣势:

Jenkins 的 job 自带并发队列,手动维护队列增加开发成本。

# blue ocean

使用 blue ocean 关联源码仓库,修改 Jenkinsfile 再运行,这种方案与第二种虽然过程不同但结果基本类似,所以优缺点基本相通

# 最后方案

根据上述 4 个方案的优缺点,结合现有的人力可以针对性的选择,那么对我们来说,第一种方案的性价比是最高的。

# Jenkinsfile

选定方案之后,我们就需要开发对应的 pipeline 脚本了。

这里也不过多介绍语法的详细,想要了解更多的同学们可以点击 API 文档地址查看更多

# 创建 stage

首先创建全量 stage

pipeline {
    agent any
    stages {
        stage('Pre Git') {
            steps {
                script {
                    echo "pre git"
                }
            }
        }
        stage('Pre Dependencies') {
            steps {
                script {
                    echo "check node_modules,${params.CACHE}"
                }
            }
        }
        stage('build') {
            steps {
                script {
                    echo "build project"
                }
            }
        }
        stage('test') {
            steps {
                script {
                    echo "test case"
                }
            }
        }
        stage('deploy') {
            steps {
                script {
                    echo "deploy project"
                }
            }
        }
    }
@前端进阶之旅: 代码已经复制到剪贴板

如上,我们创建了 5 个 stage:

  • Pre Git:拉取项目
  • Pre Dependencies:安装依赖
  • build:构建
  • test:测试
  • deploy: 发布

# Pre Git 拉取项目

拉取项目分两种

  1. 项目未拉取,这种情况很简单,直接使用如下命令即可:
sh "git clone ${params.PROJECT_GIT_PATH}"
sh "git checkout ${params.BRANCH_NAME}"
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏